<template>
    <div class="page-content">
        <!-- 腾讯地图 -->
        <section class="header">
            <h3>腾讯地图</h3>
        </section>
        <el-form label-width="150px" class="mt20">
            <el-form-item label="腾讯地图KEY：">
                <el-input v-model="settingData[0].keyValue" placeholder="请输入腾讯地图KEY" clearable />
                <div class="remark">
                    腾讯地图KEY申请地址:
                    <a href="https://lbs.qq.com/console/mykey.html?console=mykey" target="_blank"
                        rel="noopener">https://lbs.qq.com/console/mykey.html?console=mykey</a>
                </div>
            </el-form-item>
        </el-form>

        <!-- 腾讯云语音合成 -->
        <section class="header">
            <h3>腾讯云语音合成</h3>
        </section>
        <el-form label-width="150px" class="mt20">
            <el-form-item label="应用ID：">
                <el-input v-model="settingData[6].keyValue" placeholder="请输入应用ID" clearable />
            </el-form-item>
            <el-form-item label="secretId：">
                <el-input v-model="settingData[1].keyValue" placeholder="请输入腾讯云secretId" clearable />
            </el-form-item>
            <el-form-item label="secretKey：">
                <el-input v-model="settingData[2].keyValue" placeholder="请输入腾讯云secretKey" clearable />
                <div class="remark">
                    腾讯云语音合成申请地址:
                    <a href="https://cloud.tencent.com/document/product/1073/37985" target="_blank"
                        rel="noopener">https://cloud.tencent.com/document/product/1073/37985</a>
                </div>
            </el-form-item>
        </el-form>

      <!-- 腾讯云语音合成 -->
      <section class="header">
        <h3>腾讯云直播</h3>
      </section>
      <el-form label-width="150px" class="mt20">
        <el-form-item label="推流域名：">
          <el-input v-model="settingData[7].keyValue" placeholder="请输入推流域名" clearable />
        </el-form-item>
        <el-form-item label="播放域名：">
          <el-input v-model="settingData[8].keyValue" placeholder="请输入播放域名" clearable />
        </el-form-item>
        <el-form-item label="播放鉴权key：">
          <el-input v-model="settingData[9].keyValue" placeholder="请输入播放鉴权key" clearable />
        </el-form-item>
        <el-form-item label="推流鉴权key：">
          <el-input v-model="settingData[10].keyValue" placeholder="请输入推流鉴权key" clearable />
        </el-form-item>
        <el-form-item label="secretId：">
          <el-input v-model="settingData[11].keyValue" placeholder="请输入secretId" clearable />
        </el-form-item>
        <el-form-item label="secretKey：">
          <el-input v-model="settingData[12].keyValue" placeholder="请输入secretKey" clearable />
        </el-form-item>
        <el-form-item label="APP标识：">
          <el-input v-model="settingData[13].keyValue" placeholder="请输入APP标识" clearable />
        </el-form-item>
      </el-form>

        <!-- 小程序分享设置 -->
        <section class="header">
            <h3>小程序分享设置</h3>
        </section>
        <el-form label-width="150px" class="mt20">
            <el-form-item label="分享标题：">
                <el-input v-model="settingData[3].keyValue" placeholder="请输入小程序分享标题" clearable />
            </el-form-item>
            <el-form-item label="分享图片：">
                <div class="avatar-uploader" @click="openImageDialog">
                    <el-image v-if="settingData[4].keyValue" :src="settingData[4].keyValue" class="avatar"
                        fit="contain" />
                    <i v-else class="el-icon-plus avatar-uploader-icon">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </i>
                    <div v-if="settingData[4].keyValue" class="mask">替换</div>
                    <el-icon v-if="settingData[4].keyValue" class="del-image" :size="20" @click.stop="handleDelImg">
                        <CircleCloseFilled />
                    </el-icon>
                </div>
            </el-form-item>
            <el-form-item label="关注公众号地址：">
                <el-input v-model="settingData[5].keyValue" placeholder="请输入关注公众号地址" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 90px" @click="handleSave" :loading="btnLoading">
                    保存
                </el-button>
            </el-form-item>
        </el-form>
        <ImageSelectedDialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
            :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
            :operationType="false" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'
import { getAllBasicInfo, addBasicInfo } from '@/api/materialManagement'

const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const btnLoading = ref(false)

const settingData = ref([
    {
        id: '',
        sdkTypeCode: "TENCENT_MAP",
        keyCode: "API_KEY",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 1,
        remark: "腾讯地图-腾讯地图KEY"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_VOICE",
        keyCode: "ACCESS_KEY_ID",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 1,
        remark: "腾讯云语音合成-secretId"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_VOICE",
        keyCode: "ACCESS_KEY_SECRET",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云语音合成-secretKey"
    },
    {
        id: '',
        sdkTypeCode: "SHARE",
        keyCode: "TITLE",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 1,
        remark: "小程序分享设置-分享标题"
    },
    {
        id: '',
        sdkTypeCode: "SHARE",
        keyCode: "RESOURCE_URL",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "小程序分享设置-分享图片"
    },
    {
        id: '',
        sdkTypeCode: "SHARE",
        keyCode: "LOCATION",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "小程序分享设置-关注公众号地址"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_VOICE",
        keyCode: "APP_ID",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云-APP_ID"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_LIVE",
        keyCode: "PUSH_URL",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云直播-推流域名"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_LIVE",
        keyCode: "PLAY_URL",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云直播-播放域名"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_LIVE",
        keyCode: "PLAY_KEY",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云直播-播放鉴权key"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_LIVE",
        keyCode: "PUSH_KEY",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云直播-推流鉴权key"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_LIVE",
        keyCode: "ACCESS_KEY_ID",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云直播-secretId"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_LIVE",
        keyCode: "ACCESS_KEY_SECRET",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云直播-secretKey"
    },
    {
        id: '',
        sdkTypeCode: "TENCENT_LIVE",
        keyCode: "APP_NAME",
        keyValue: "",
        sensitive: 0,
        status: 1,
        sort: 2,
        remark: "腾讯云直播-APP标识"
    }
])

const openImageDialog = () => {
    showImageChooseDialog.value = true
}

const handleCloseImageDialog = (value: any) => {
    if (value && value.fileUrl) {
        settingData.value[4].keyValue = value.fileUrl
    }
    showImageChooseDialog.value = false
}

const handleDelImg = () => {
    settingData.value[4].keyValue = ''
}

const getData = async () => {
    const res = await getAllBasicInfo()
    if (res.code === '00000' && res.data) {
        res.data.forEach((group: any) => {
            if (group.aoList) {
                group.aoList.forEach((ao: any) => {
                    const target = settingData.value.find(item => item.keyCode === ao.keyCode && item.sdkTypeCode === ao.sdkTypeCode)
                    if (target) {
                        target.keyValue = ao.keyValue
                        target.id = ao.id
                    }
                })
            }
        })
    }
}

const handleSave = async () => {
    try {
        btnLoading.value = true
        const res = await addBasicInfo(settingData.value)
        if (res.code === '00000') {
            ElMessage.success('操作成功')
            getData()
        }
    } finally {
        btnLoading.value = false
    }
}

onMounted(()=>{
  getData()
})
</script>

<style lang="scss" scoped>
.page-content {
    padding: 20px 20px 92px !important;
    width: 100%;
    height: 100%;

    .header {
        padding-bottom: 15px;
        border-bottom: 1px solid var(--art-border-color);

        h3 {
            font-size: 18px;
        }
    }

    :deep(.el-form) {
        .el-form-item {
            max-width: 700px;
        }
    }
}

.mt20 {
    margin-top: 20px;
}

.remark {
    color: #999;
    font-size: 13px;
    margin-top: 4px;

    a {
        color: #409EFF;
        text-decoration: underline;
        word-break: break-all;
    }
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 160px;
    background-color: #fff;
    text-align: center;
    line-height: 160px;
    display: inline-block;

    .mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        color: #fff;
        font-size: 12px;
    }

    .del-image {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #8c939d;
    }

    &:hover .mask {
        opacity: 1;
    }

    &:hover .del-image {
        display: block;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
}
</style>